<template>
  <var-app-bar
    :fixed="fixed"
    style="margin-bottom: 5px"
    :color="color"
    :text-color="textColor"
    :title="title"
    :title-position="titlePosition"
  >
    <template #left>
      <var-icon @click="linkTo" name="chevron-left" :size="24" />
    </template>

    <template #right>
      <slot name="right" />
    </template>
  </var-app-bar>
</template>

<script setup lang="ts">
import { TRUE } from 'sass'

const props = defineProps({
  title: String,
  to: String,
  color: {
    default: '#fff'
  },
  textColor: {
    default: '#000'
  },
  titlePosition: {
    default: 'center'
  },
  fixed: {
    default: false
  }
})

const router = useRouter()

const linkTo = () => {
  props.to ? router.push(props.to) : router.back()
}
</script>

<style scoped lang="scss"></style>
